<template>
  <view class="container" :style="{ paddingTop: topSafeHeight + 'px' }">
    <view class="custom-header">
      <text class="iconfont icon-arrow-alt" @tap="goBack"></text>
      <view class="tab-header">
        <view class="tabs-container">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            class="tab-item"
            :class="{ active: currentTab === tab.value }"
            @click="switchTab(tab.value)"
          >
            <text>{{ tab.label }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <search-bar
        @search="handleSearch"
        :placeholder="placeholder"
      ></search-bar>
      <scroll-view scroll-y class="list-container">
        <warehouse-item
          v-for="(item, index) in list"
          :key="`${item.number}-${index}`"
          :item="item"
          @view-detail="handleViewDetail"
          :transporType="2"
        ></warehouse-item>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import SearchBar from "@/components/search-bar/search-bar.vue";
import WarehouseItem from "@/components/warehouse-item/warehouse-item.vue";
// import api from "@/api";
import { saleRoomList } from "@/api";
import { defaultMixins } from "@/mixins";
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight; //手机端头部手机时间位置高度

export default {
  mixins: [defaultMixins],
  components: {
    SearchBar,
    WarehouseItem,
  },
  data() {
    return {
      currentTab: "-1",
      tabs: [
        { label: "全部", value: "-1" },
        { label: "待入库", value: "0" },
        { label: "已入库", value: "1" },
        { label: "已取消", value: "2" },
      ],
      placeholder: "请输入商品名称",
      searchText: "",
      list: [],
      total: 0,
      page: 1,
      limit: 10,
      topSafeHeight: statusBarHeight  || 0,
    };
  },
  computed: {
   
  },
  mounted() {
    this.getList();
  },
  methods: {
    randomKey() {
      return (
        Math.random().toString(36).substring(2, 15) +
        Math.random().toString(36).substring(2, 15)
      );
    },
    switchTab(tab) {
      this.currentTab = tab;
      this.resetPagination();
      this.getList();
    },
    goBack() {
      uni.navigateBack();
    },
    handleSearch(value) {
      this.searchText = value;
      this.resetPagination();
      this.getList();
    },
    getList() {
      let data = {
        page: this.page,
        limit: this.limit,
        inOrOutWarehouseType: 2,
        inOrOutWarehouseStatus: this.currentTab,
        inOrOutOrderNumber: this.searchText
      };
       saleRoomList(data).then((res) => {
        if (this.page === 1) {
          this.list = res.data.list;
        } else {
          this.list = [...this.list, ...res.data.list];
        }
        this.total = res.data.total;
        this.updateLoadMoreStatus();
      });
    },
    handleViewDetail(item) {
      console.log("查看详情：", item);
      // this.detailRow = item
      uni.setStorageSync('detailRow', item)
      uni.navigateTo({
        url: `/pages/orderIn/detail?id=${item.id}&inOrOutWarehouseType=2`, //1:出 2:入
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .custom-header {
    display: flex;
    align-items: center;
    padding-top: 40rpx;
    padding-bottom: 20rpx;
    background-color: #fff;
    .iconfont {
      font-size: 40rpx;
      padding: 0 20rpx;
      flex-shrink: 0;
    }
    .tab-header {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      .tab-item {
        position: relative;
        padding: 10rpx 30rpx;

        text {
          font-size: 28rpx;
          color: #666;
        }

        &.active {
          text {
            color: #333;
            font-weight: bold;
          }

          &::after {
            content: "";
            position: absolute;
            bottom: -6rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 40rpx;
            height: 4rpx;
            background-color: #333;
            border-radius: 2rpx;
          }
        }
      }

      .tabs-container {
        display: inline-flex;
        background-color: #e7e7e7;
        border-radius: 8rpx;
        padding: 4rpx 0;
      }
    }
  }
  .content {
    background: #f9f9f9;
    padding: 20rpx;
    flex: 1;
    display: flex;
    flex-direction: column;

    .list-container {
      flex: 1;
      margin-top: 20rpx;
    }
  }
}
</style>
